<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="./css/webbase2.css"/>
    <!-- 自定义 Tailwind 配置 -->
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>
    <link rel="stylesheet" type="text/css" href="./css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="./css/order-detail.css"/>
    <style>
        /* 基础样式调整 */
        .order-detail {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .order-detail h2 {
            color: #333;
            font-size: 1.8rem;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }

        .detail-content {
            display: flex;
            gap: 2rem;
            align-items: center;
            background: #fff;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        /* 订单信息样式 */
        .order-info {
            flex: 1;
            min-width: 300px;
        }

        .order-info p {
            margin: 0.8rem 0;
            font-size: 1rem;
            color: #555;
            line-height: 1.6;
        }

        .order-info p:first-child {
            font-weight: 600;
            color: #333;
        }

        /* 商品信息样式 */
        .product-info {
            flex: 1;
            min-width: 300px;
        }

        .product-info h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #333;
        }

        .product-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .product-img {
            width: 160px;
            height: 160px;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 商品详情内容样式 - 已与订单详情字体大小统一 */
        .product-info-content p {
            margin: 0.8rem 0;
            font-size: 1rem; /* 与订单详情字体大小一致 */
            color: #555;
            line-height: 1.6;
        }

        .product-info-content p:first-child {
            font-weight: 600;
            font-size: 1.1rem;
            color: #333;
        }

        /* 加载和错误状态样式 */
        .loading, .error {
            text-align: center;
            padding: 3rem 0;
            font-size: 1.1rem;
        }

        .loading {
            color: #666;
        }

        .error {
            color: #e53e3e;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .detail-content {
                flex-direction: column;
                align-items: flex-start;
            }

            .product-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .product-img {
                width: 100%;
                max-width: 300px;
                height: auto;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <top></top>
    <div class="order-detail py-container">
        <h2>订单详情</h2>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">获取订单详情失败，请重试</div>
        <div v-else class="detail-content">
            <!-- 订单基本信息（左侧） -->
            <div class="order-info">
                <p>订单编号：{{ orderDetail.id }}</p>
                <p>支付方式：{{ paymentTypes[orderDetail.paymentType - 1] }}</p>
                <p>支付金额：￥{{ util.formatPrice(orderDetail.totalFee) }}元</p>
                <p>订单状态：{{ getOrderStatusText(orderDetail.status) }}</p>
                <p>创建时间：{{ formatTime(orderDetail.createTime) }}</p>
                <p v-if="orderDetail.payTime">支付时间：{{ formatTime(orderDetail.payTime) }}</p>
            </div>

            <!-- 商品信息（右侧） -->
            <div class="product-info">
                <h3>商品详情</h3>
                <div v-for="(item, index) in orderDetail.items" :key="index" class="product-item">
                    <img :src="item.image" alt="商品图片" class="product-img">
                    <div class="product-info-content">
                        <p>品牌：{{ item.brand }}</p>
                        <p>类目：{{ item.category }}</p>
                        <p>规格：{{ item.spec }}</p>
                        <p>单价：￥{{ util.formatPrice(item.price) }}元</p>
                        <p>数量：{{ item.stock }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div><foot></foot>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="js/common.js"></script>
<script src="js/top.js"></script>
<script type="text/javascript"></script>
<script src="./js/foot.js"></script>
<script src="./js/copyright.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                orderDetail: null, // 订单与商品详情
                paymentTypes: ["支付宝支付", "微信支付", "扣减余额"],
                util,
                loading: true,
                error: false
            };
        },
        created() {
            // 获取URL中的订单ID
            const orderId = util.getUrlParam("orderId");
            if (!orderId) {
                this.error = true;
                this.loading = false;
                return;
            }

            // 调用后端接口获取订单与商品详情
            axios.get(`/orders/OrderItemDetail?id=${orderId}`)
                .then(resp => {
                    if (resp.success && resp.data) {
                        this.orderDetail = resp.data;
                    } else {
                        this.error = true;
                    }
                    this.loading = false;
                })
                .catch(err => {
                    console.error("获取订单详情失败：", err);
                    this.error = true;
                    this.loading = false;
                });
        },
        methods: {
            // 格式化时间（假设后端返回的是LocalDateTime字符串）
            formatTime(timeStr) {
                if (!timeStr) return "";
                const d = new Date(timeStr);
                return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
            },
            // 转换订单状态为文本
            getOrderStatusText(status) {
                const statusMap = {
                    1: "未付款",
                    2: "已付款，未发货",
                    3: "已发货，未确认",
                    4: "确认收货，交易成功",
                    5: "交易取消，订单关闭",
                    6: "交易结束，已评价"
                };
                return statusMap[status] || "未知状态";
            }
        }
    });
</script>
</body>
</html>
